Pretočno upodabljanje React: Progresivno strežniško upodabljanje za optimizirano uporabniško izkušnjo

V svetu spletnega razvoja je zagotavljanje hitre in odzivne uporabniške izkušnje ključnega pomena. Uporabniki pričakujejo, da se bodo spletna mesta hitro naložila in bila interaktivna brez zamud. React, priljubljena knjižnica JavaScript za gradnjo uporabniških vmesnikov, ponuja zmogljivo tehniko, imenovano pretočno strežniško upodabljanje (SSR), za reševanje tega izziva. Ta članek se poglobi v koncept pretočnega upodabljanja React SSR, raziskuje njegove prednosti, implementacijo in vpliv na zmogljivost spletnega mesta ter uporabniško izkušnjo.

Kaj je strežniško upodabljanje (SSR)?

Tradicionalno odjemalsko upodabljanje (CSR) vključuje prenos datotek HTML, JavaScript in CSS s strani brskalnika ter nato upodabljanje vsebine na odjemalski strani. Čeprav je ta pristop prilagodljiv, lahko privede do zakasnelega začetnega upodabljanja, saj mora uporabnik počakati na prenos vseh virov in izvedbo JavaScripta, preden vidi katero koli vsebino. SSR pa na drugi strani upodobi komponente React na strežniku in pošlje v celoti upodobljen HTML odjemalcu. To povzroči hitrejši začetni čas nalaganja, saj brskalnik prejme v celoti oblikovan HTML, ki ga je mogoče takoj prikazati.

Omejitve tradicionalnega SSR

Medtem ko tradicionalni SSR ponuja znatno izboljšanje v primerjavi s CSR, ima svoje omejitve. Pri tradicionalnem SSR je treba celotno aplikacijo upodobiti na strežniku, preden se kakršen koli HTML pošlje odjemalcu. To je lahko ozko grlo, zlasti pri kompleksnih aplikacijah z več komponentami in odvisnostmi od podatkov. Čas do prvega bajta (TTFB) je lahko visok, kar povzroči zaznano počasnost za uporabnika.

Pretočno upodabljanje React SSR: Progresivni pristop

Pretočno upodabljanje React SSR premaguje omejitve tradicionalnega SSR z uporabo progresivnega pristopa. Namesto čakanja, da se celotna aplikacija upodobi na strežniku, pretočno upodabljanje SSR razdeli postopek upodabljanja na manjše dele in te dele pošilja odjemalcu, ko postanejo na voljo. To omogoča brskalniku, da začne prikazovati vsebino veliko prej, kar izboljša zaznano zmogljivost in zmanjša TTFB. Zamislite si to kot restavracijo, ki pripravlja vašo jed v fazah: najprej se postreže predjed, nato glavna jed in končno sladica, namesto da bi čakali, da bo celoten obrok pripravljen hkrati.

Prednosti pretočnega upodabljanja React SSR

• Hitrejši začetni čas nalaganja: S pretakanjem HTML delov odjemalcu lahko brskalnik začne prikazovati vsebino veliko prej, kar povzroči hitrejši zaznani čas nalaganja in izboljšano angažiranost uporabnikov.
• Izboljšan čas do prvega bajta (TTFB): Pretočno upodabljanje SSR zmanjša TTFB s pošiljanjem začetnega HTML dela takoj, ko je pripravljen, namesto da bi čakalo na upodabljanje celotne aplikacije.
• Izboljšana uporabniška izkušnja: Hitrejši začetni čas nalaganja vodi do boljše uporabniške izkušnje, saj uporabnikom ni treba čakati na prikaz vsebine.
• Boljši SEO: Iskalniki lahko učinkoviteje indeksirajo vsebino, saj je HTML enostavno dostopen na strežniku.
• Progresivna hidracija: Pretočno upodabljanje SSR omogoča progresivno hidracijo, kjer se React koda na odjemalski strani postopoma pritrdi poslušalce dogodkov in omogoči interaktivnost aplikacije, ko se pretakajo HTML deli.
• Izboljšana izkoriščenost virov: Z razčlenitvijo postopka upodabljanja na manjše dele lahko pretočno upodabljanje SSR izboljša izkoriščenost virov na strežniku.

Kako deluje pretočno upodabljanje React SSR

Pretočno upodabljanje React SSR uporablja API ReactDOMServer.renderToPipeableStream() za pretakanje HTML delov odjemalcu. Ta API vrne berljiv tok, ki ga je mogoče preusmeriti v odzivni objekt strežnika. Tukaj je poenostavljena ilustracija delovanja:

1. Strežnik prejme zahtevo za stran.
2. Strežnik pokliče ReactDOMServer.renderToPipeableStream(), da upodobi aplikacijo React v tok.
3. Tok začne oddajati HTML dele, ko se komponente React upodabljajo.
4. Strežnik preusmeri tok v odzivni objekt, pošiljajoč HTML dele odjemalcu.
5. Brskalnik prejme HTML dele in jih začne prikazovati progresivno.
6. Ko so vsi HTML deli prejeti, brskalnik hidrira aplikacijo React, kar jo naredi interaktivno.

Implementacija pretočnega upodabljanja React SSR

Za implementacijo pretočnega upodabljanja React SSR boste potrebovali strežnik Node.js in aplikacijo React. Tukaj je vodnik po korakih:

1. Nastavite strežnik Node.js: Ustvarite strežnik Node.js z uporabo ogrodja, kot sta Express ali Koa.
2. Namestite React in ReactDOMServer: Namestite paketa react in react-dom.
3. Ustvarite aplikacijo React: Ustvarite aplikacijo React s komponentami, ki jih želite upodabljati na strežniku.
4. Uporabite ReactDOMServer.renderToPipeableStream(): V kodi strežnika uporabite API ReactDOMServer.renderToPipeableStream() za upodabljanje vaše aplikacije React v tok.
5. Preusmerite tok v odzivni objekt: Preusmerite tok v odzivni objekt strežnika, da pošljete HTML dele odjemalcu.
6. Obvladovanje napak: Implementirajte obvladovanje napak za zajemanje morebitnih napak, ki se lahko pojavijo med postopkom upodabljanja.
7. Dodajte oznako skripta za hidracijo: Vključite oznako skripta v HTML za hidracijo aplikacije React na odjemalski strani.

Primer izrezka kode (strežniška stran):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Vaša React komponenta

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Vstopna točka na odjemalski strani
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Žal, nekaj je šlo narobe
');
    }
  });

  setTimeout(abort, 10000); // Neobvezno: Časovna omejitev za preprečitev nedoločenega čakanja
});

app.use(express.static('public')); // Strežba statičnih sredstev

app.listen(port, () => {
  console.log(`Strežnik posluša na http://localhost:${port}`);
});

Primer izrezka kode (odjemalska stran - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Primer komponente aplikacije React (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Podatki uspešno naloženi!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulirajte zakasnitev nalaganja
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Dobrodošli v pretočnem SSR!
      
To je predstavitev pretočnega upodabljanja React SSR.
      Nalaganje...
}>